<script setup lang="ts">
import { http } from '@/utils/imagehttp'
import { onMounted, ref } from 'vue'
const imgList = ref<string[]>([
    'https://gitcode.net/qq_44112897/images/-/raw/master/comic/5.jpg',
    'https://gitcode.net/qq_44112897/images/-/raw/master/comic/40.jpg',
    'https://gitcode.net/qq_44112897/images/-/raw/master/comic/15.jpg'
]);
console.log(imgList);
const ImagesIcon = ref([
    {

        name: '热门案列',
        path: '/static/images/icon_hot_default.png'

    },
    {
        name: '免费咨询',
        path: '/static/images/icon_consult_default.png'
    },
    {
        name: '信用卡协商',
        path: '/static/images/icon_wangdaixieshang_default.png'
    },
    {
        name: '网贷协商',
        path: '/static/images/home_icon_Vector_def.png'
    },
    {
        name: '停催免诉',
        path: '/static/images/home_icon_tingcuimiansu_pressed.png'
    }])

</script>
<template>
    <view class="cannas">
        <!-- <image src="https://gitcode.net/qq_44112897/images/-/raw/master/comic/5.jpg" mode="scaleToFill"
                class="cannaserver" /> -->
        <swiper :autoplay="false" interval="true" duration="500" :circular="true" indicator-dots="true"
            class="subfloat_pictures">
            <swiper-item v-for="(image, index) in imgList" :key="index">
                <image :src="image" mode="aspectFill" class="cannaserver" />
            </swiper-item>
        </swiper>
        <view class="mide-box">
            <image class="mide-minbox" src="" title="西汉图"></image>
            <view class="mide-title1">逾期 延期 协商</view>
            <navigator url="/pages/newlow/newlow" class="mide-title2">最新政策</navigator>
            <navigator url="/pages/newlow/newlow" open-type="navigate" hover-class="navigator-hover" class="img-path">
                <img src="/static/images/right.png" alt="跳转" class="img-path1">
            </navigator>
        </view>
        <view class="tag">
            <view class="min-box" v-for=" (item, index) in ImagesIcon" :key="index">
                <view class="icon">
                    <image :src="item.path" class="icon-image"></image>
                </view> <!-- 添加图标元素 -->
                <text class="label">{{ item.name }}</text>
            </view>
        </view>
    </view>
</template>

<style lang="scss">
.cannas {
    position: sticky;
    margin: 0 64rpx;
    margin-top: 36rpx;
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .subfloat_pictures {
        display: flex;
        align-items: center;
        width: 632rpx;
        height: 150rpx;
        overflow: hidden;
        border-radius: 20rpx;
        box-shadow: 0px 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);

        .cannaserver {
            display: flex;
            align-items: center;
            margin: 0 auto;
            width: 632rpx;
            height: 150rpx;
            border-radius: 20rpx;
            box-shadow: 0px 8rpx 8rpx 0px rgba(0, 0, 0, 0.25);
        }
    }

    .mide-box {
        position: relative;
        margin-top: 42rpx;
        display: flex;
        width: 632rpx;
        height: 194rpx;
        background: #f8d770;
        border-radius: 10px;

        .mide-minbox {
            display: flex;
            margin-left: 46rpx;
            margin-top: 24rpx;
            width: 150rpx;
            height: 146rpx;
            background: #ffffff;
            border-radius: 10px;
            box-shadow: 0px 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
            z-index: 1;
        }

        .mide-title1 {
            position: absolute;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            margin-top: 20rpx;
            margin-left: 182rpx;
            width: 384rpx;
            height: 60rpx;
            font-size: 40rpx;
            font-family: STZhongsong, STZhongsong-400;
            font-weight: 400;
            text-align: CENTER;
            color: #f2ecec;
            line-height: 46rpx;
        }

        .mide-title2 {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 300rpx;
            height: 104rpx;
            margin-top: 44rpx;
            margin-right: 26rpx;
            margin-left: 306rpx;
            font-family: STZhongsong, STZhongsong-400;
            font-size: 72rpx;
            font-weight: 400;
            text-align: center;
            color: #000000;
            line-height: 84rpx;
        }

        .img-path {

            // background-image: url(@/static/images/right.png);
            position: absolute;
            width: 30rpx;
            height: 36rpx;
            right: 30rpx;
            bottom: 15rpx;

            .img-path1 {
                width: 30rpx;
                height: 36rpx;
                right: 40rpx;
                bottom: 20rpx;
            }
        }
    }

    .tag {
        display: flex;
        margin-top: 26rpx;

        .min-box {
            position: relative;
            display: flex;
            width: 112rpx;
            height: 148rpx;
            margin-right: 20rpx;
            /* 可以调整盒子之间的间距 */

            justify-content: center;
            align-items: center;

            .icon {
                display: flex;
                width: 90rpx;
                height: 90rpx;
                background: #ffffff;
                border-radius: 5px;
                box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
                margin-bottom: 40rpx;
                /* 图标距离文本标签的距离 */
            }

            .icon-image {
                position: absolute;
                justify-content: center;
                align-items: center;
                top: 20rpx;
                width: 70rpx;
                height: 70rpx;
                margin: 0 10rpx;
                /* 水平居中 */
            }

            .label {
                position: absolute;
                bottom: 0;
                width: 102rpx;
                height: 34rpx;
                font-size: 24rpx;
                font-family: PingFang SC, PingFang SC-500;
                font-weight: 500;
                text-align: center;
                color: #070707;
                line-height: 34rpx;
                white-space: nowrap;
            }
        }
    }
}
</style>